import BottomTabBar from '@/common/BottomTabBar';
import GameWrapper from '@/common/GameWrapper';
import React, { useState } from 'react';
import styles from './index.less';
import { Modal } from 'antd-mobile';

const gameName = '五子棋';
const gameRuleTpl = <div>
    <p>1.黑棋先走</p>
    <p>2.黑白双方谁先连五谁赢</p>
</div>;



const size = {
    x: 15,
    y: 15
};
const getDefaultList = () => {
    let defaultList = new Array();
    for (var y = 0; y < size.y; y++) {
        defaultList[y] = new Array();
        for (var x = 0; x < size.x; x++) {
            const isPieceBox = x !== size.x - 1 && y !== size.y - 1;
            defaultList[y][x] = { x, y, isPieceBox, pieceColor: '' };
        }
    }

    return defaultList;
}


export default () => {
    const [list, setList] = useState<any[]>(getDefaultList());
    const [nowPieceColor, setNowPieceColor] = useState<string>('black');
    const [winModalVisible, setWinModalVisible] = useState<boolean>(false);
    const [winMessage, setWinMessage] = useState<string>('');
    const [stepNum, setStepNum] = useState<string>(0);

    const selfUtilTpl = <>
        <span>步数：{stepNum}</span>
        <span onClick={() => resetGame()}  >重新开始</span>
    </>;

    const resetGame = () => {
        setWinModalVisible(false);
        setList(getDefaultList());
        setNowPieceColor('black');
        setWinMessage('');
    }

    const checkWin = (listArr: any[]) => {
        for (var y = 0; y < size.y - 5; y++) {
            for (var x = 0; x < size.x - 5; x++) {
                const { pieceColor } = listArr[y][x];
                if (!pieceColor) { continue; }
                let rightWIN = true, bottomWIN = true, rightBottomWIN = true;
                for (var i = 1; i < 5; i++) {
                    const rightIsSameColor = listArr[y][x + i].pieceColor === pieceColor;
                    const bottomIsSameColor = listArr[y + i][x].pieceColor === pieceColor;
                    const rightBottomIsSameColor = listArr[y + i][x + i].pieceColor === pieceColor;
                    if (!rightIsSameColor) {
                        rightWIN = false;
                    }
                    if (!bottomIsSameColor) {
                        bottomWIN = false;
                    }
                    if (!rightBottomIsSameColor) {
                        rightBottomWIN = false;
                    }
                    if (!rightWIN && !bottomWIN && !rightBottomWIN) {
                        break;
                    }
                }
                if (rightWIN || bottomWIN || rightBottomWIN) {
                    const WinMessage = pieceColor === 'black' ? '黑棋胜利' : '白棋胜利';
                    setWinMessage(WinMessage);
                    setWinModalVisible(true);
                }
            }
        }
    }

    const onPiece = (item) => {
        const { pieceColor, x, y } = item;
        if (pieceColor) {
            return;
        }
        let newList = list;
        newList[y][x].pieceColor = nowPieceColor;
        if (nowPieceColor === 'black') {
            setStepNum(stepNum + 1);
        }
        setList(newList);
        setNowPieceColor(nowPieceColor === 'black' ? 'white' : 'black');
        checkWin(newList);
    }

    return (
        <div className={styles.wzq}>
            <GameWrapper gameName={gameName} gameRuleTpl={gameRuleTpl} selfUtilTpl={selfUtilTpl}>
                <div className="grid">
                    {
                        list.map((line, y) => (
                            <div className="line" key={y}>
                                {
                                    line.map((item, x) => (
                                        <div className="cell" key={x}>
                                            {
                                                item.isPieceBox ? <div onClick={() => onPiece(item)} className={`piece ${item.pieceColor}`}></div> : ''
                                            }
                                        </div>
                                    ))
                                }
                            </div>
                        ))
                    }
                </div>
            </GameWrapper>
            <Modal
                visible={winModalVisible}
                transparent
                maskClosable={false}
                footer={[{ text: '重新游戏', onPress: () => resetGame() }]}
            >
                <div className="game-rule-wrapper" style={{ minHeight: 100, overflowY: 'scroll', textAlign: 'left' }}>
                    {winMessage}
                </div>
            </Modal>
        </div>
    );
}
